<template>
  <view class="content">
    <view v-for="(item, index) in signList" :key="index" class="signItem">
      <view class="sign-left">
        <image class="header-face" :src="item.image"></image>
        <view class="signInfo">
          <view>{{ item.createByName }}</view>
          <view class="time">{{ item.createTime }}</view>
        </view>
      </view>
      <view class="sign-right">报名成功</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      signList: [
        {
          createByName: "小貂蝉",
          createTime: "2022-12-20 11:00:00",
          image: require("@/static/img/header.jpg"),
          sign: true,
        },
        {
          createByName: "小貂蝉",
          createTime: "2022-12-20 11:00:00",
          image: require("@/static/img/header.jpg"),
          sign: true,
        },
        {
          createByName: "小貂蝉",
          createTime: "2022-12-20 11:00:00",
          image: require("@/static/img/header.jpg"),
          sign: false,
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.content {
  padding: 0 30rpx;
  margin-top: 30rpx;
  .signItem {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 30rpx;
    .sign-left {
      display: flex;
      align-items: center;
      .header-face {
        width: 80rpx;
        height: 80rpx;
      }
      .signInfo {
        .time {
          margin-top: 20rpx;
          color: #acacac;
        }
      }
    }
    .sign-right {
      color: #f4333c;
      background: #fcf0f0;
      padding: 16rpx 30rpx;
      border-radius: 30rpx;
    }
  }
}
</style>